<template>

  <div>
    <div>
      <h2 style="text-align:left;margin-left: 30px;color:#fff">
        <i class="el-icon-upload" style="font-size:25px"></i>&nbsp;个人设置
      </h2>
      <hr style="text-align:left;margin-left: 30px;width:150px;height:5px;border:none;background-color:#4074bf" />
    </div>

    <el-card style="margin-left:25px;margin-top:20px;">
      <el-row style="width:120px;">
        <el-col :span="6">
          <img src="../../../assets/fans.png" style="width:20px;" />
        </el-col>
        <el-col :span="18">
          <h3 style="font-size:16px;margin-top:0">个人信息</h3>
        </el-col>
      </el-row>
      <el-form ref="userform" :model="userform" label-width="80px" style="text-align:left">
        <el-form-item label="头像">
          <el-avatar :size="100" :src="userInfo.infoImg" fit="cover" style="border:3px solid #BBDDFF"></el-avatar>
          <AlterUpload @upImg="alterUrl"></AlterUpload>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input v-model="userInfo.infoNickname" style="width:300px;"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="userInfo.infoSex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
            <el-radio label="保密"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="生日">
          <el-date-picker type="date" placeholder="选择日期" v-model="userInfo.infoBirthday" style="width: 200px;"
            value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>

        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="userInfo.infoIntro"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">更改信息</el-button>
        </el-form-item>

      </el-form>
    </el-card>


    <el-card style="margin-left:25px;margin-top:20px;">
      <el-row style="width:120px;">
        <el-col :span="6">
          <img src="../../../assets/fans.png" style="width:20px;" />
        </el-col>
        <el-col :span="18">
          <h3 style="font-size:16px;margin-top:0">更改密码</h3>
        </el-col>
      </el-row>

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原密码">
          <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="alterPass">修改密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>



  </div>
</template>

<script>
  import {
    mapState
  } from 'vuex'

  import {
    alterInfo,
    loginAccount,
    alterPass
  } from '@/api/accountApi.js';

  import AlterUpload from "../../common/AlterUpload"

  export default {
    name: 'MySetting',
    computed: {
      ...mapState(['userInfo']),
    },
    components: {
      AlterUpload
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        userform: {},
        ruleForm: {
          oldpass: '',
          pass: '',
          checkPass: '',
        },
        rules: {
          pass: [{
            validator: validatePass,
            trigger: 'blur'
          }],
          checkPass: [{
            validator: validatePass2,
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      onSubmit() {
        this.$message({
          message: '信息已更改成功！(ง •̀_•́)ง',
          type: 'success'
        });
        alterInfo(this.userInfo.infoId,
          this.userInfo.accountId,
          this.userInfo.infoImg,
          this.userInfo.infoNickname,
          this.userInfo.infoBirthday,
          this.userInfo.infoSex,
          this.userInfo.infoIntro)
      },
      alterUrl(data) {
        this.userInfo.infoImg = data.urlImg;
      },
      alterPass() {
        if(this.ruleForm.oldpass==''){
          return this.$message.error('原密码不得为空 _(´ཀ`」 ∠)_');
        }
        if(this.ruleForm.pass==this.ruleForm.checkPass){
          return this.$message.error('新密码和确认密码不一致 _(´ཀ`」 ∠)_');
        }
        loginAccount(this.$store.state.user.username, this.ruleForm.oldpass).then(resp => {
          if (400 == resp.data) {
            this.$message.error('原密码错误,请重试 _(´ཀ`」 ∠)_');
          } else {
            this.$message({
              message: '密码已更改成功！(ง •̀_•́)ง',
              type: 'success'
            });
            alterPass(this.userInfo.accountId, this.$store.state.user.username, this.ruleForm.checkPass)
          }
        })
      }
    },
  }
</script>

<style>

</style>